import {createApp} from "vue";
import FileUpload from "@/components/plugs/upload/FileUpload.vue";
import type {UploadView} from "@/components/plugs/upload/UploadInterface.ts";

class FileUploadCommand {
    props: {};
    uploadComponent!: any;
    uploadApp!: any;
    containerBox!: HTMLElement; // 使用 ! 表示这个属性稍后会被赋值

    constructor(props: UploadView) {
        this.props = props;
        this.#mount();
    }

    #mount() {

        const containerBox = document.createElement("div");
        const uploadApp:any = createApp(FileUpload, this.props);
        const uploadComponent:any = uploadApp.mount(containerBox);

        document.body.appendChild(containerBox);

        this.containerBox = containerBox;
        this.uploadComponent = uploadComponent;
        this.uploadApp = uploadApp;
    }

    destroy() {
        this.uploadApp.unmount();
        this.containerBox.remove();
    }

    callFnc(methodName: string,...options: object[]) {
        const method = Reflect.get(this.uploadComponent, methodName);
        method.apply(this.uploadComponent,options);
    }

    show(){
        const obj = this;
        this.callFnc("show",function (){
            obj.destroy();
        });
    }

    hide(){
        this.callFnc("hide");
    }
}

export default FileUploadCommand;

